import React from 'react'
import Layout from '@/components/layout'
import Post from '@/components/post'
import { getAllSlugs, getPostBySlug } from '@/lib/apis'
import PostType from '@/types/post'

import type { GetStaticPaths, GetStaticProps, NextPage } from 'next'
export type PostPageProps = {
  post: PostType
}

export const getStaticPaths: GetStaticPaths = async () => {
  const slugs = getAllSlugs()
  return {
    paths: slugs.map((slug) => ({ params: { slug } })),
    fallback: false,
  }
}

export type Return = {
  post?: PostType
}

export type Params = {
  slug: string
}

export const getStaticProps: GetStaticProps<Return, Params> = async ({
  params,
}) => {
  const post = params ? getPostBySlug(params?.slug) : undefined
  return {
    props: {
      post,
    },
    revalidate: 1,
  }
}

const PostPage: NextPage<PostPageProps> = ({ post }) => {
  return (
    <Layout>
      <Post post={post} />
    </Layout>
  )
}

export default PostPage
